<template lang="pug">
	.find-patient-wrap
		.patient-group(v-for="(item,index) in list" :key="index")
			.patient-name
				.patient-left
					.name {{item.name}}
					.state(:class="{'active':item.realState==='1'}") {{item.stateText}}
				.patient-right {{item.familyRelation}}
			.patient-card(v-for="(it,itIndex) in item.list" :key="itIndex" @click="findPatient(it)")
				.card-icon
					img(:src="it.cardType==='1'?jiankang:shebao")
				.card-content
					.title {{it.cardTypeText}}
					.num {{it.cardNumber}}
				.card-select(:class="{'active':it.selected}")
					img(src="../../assets/image/healthCard/selectedIcon.png")

</template>

<script>
import dianzi from '@/assets/image/healthCard/qricon.png'
import jiankang from '@/assets/image/healthCard/healthIcon.png'
import shebao from '@/assets/image/healthCard/securityIcon.png'
export default {
	name: 'findPatient',
	data() {
		return {
			dianzi: dianzi,
			jiankang: jiankang,
			shebao: shebao,
			list: []
		}
	},
	created() {},
	mounted() {
		this.getCardList()
	},
	methods: {
		getCardList() {
			this.wx.showLoading({
				title: '加载中',
				icon: 'none'
			})
			let cardNumber = this.wx.getStorageSync('findPatient').cardNumber
			this.api.tzApi
				.getCardList({
					mainHealthId: this.wx.getStorageSync('userInfo').memberNum
				})
				.then(data => {
					this.wx.hideLoading()
					if (data.responseFlag === '1') {
						let result = data.data
						result = result.filter(item => item.list !== null)
						let self = result.find(item => item.familyRelation === '本人')
						result = _.uniq([self, ...result])
						result.forEach(item => {
							item.stateText = item.realState === '1' ? '已认证' : '未认证'
							item.list.forEach(it => {
								it.cardTypeText = it.cardType === '1' ? '健康卡' : '社保卡'
								it.selected = it.cardNumber === cardNumber
							})
						})
						this.list = result
					}
				})
				.catch(() => {
					this.wx.hideLoading()
				})
		},
		findPatient(it) {
			this.wx.setStorage({
				key: 'findPatient',
				data: {
					name: it.name,
					idNumber: it.idNumber,
					cardType: it.cardType,
					cardNumber: it.cardNumber,
					sscardId: it.sscardId,
					phone: it.phone,
					yyzt: it.yyzt
				}
			})
			this.wx.setStorage({
				key: 'isReload',
				data: {
					reload: true
				}
			})
			this.$router.back()
		}
	}
}
</script>

<style lang="stylus">
	.find-patient-wrap
		.patient-group
			padding 30px 20px 0
			.patient-name
				display flex
				align-items center
				justify-content space-between
				line-height 44px
				.patient-left
					flex 1
					.name
						font-size 30px
						color blackFontColor1A
						display inline-block
						margin-right 15px
					.state
						height 32px
						line-height 32px
						padding 0 10px
						background-color #FDC1C1
						border-radius 18px
						display inline-block
						font-size 20px
						color white
						vertical-align 2px
						&.active
							background-color #A9CCFF
				.patient-right
					font-size 28px
					color blackFontColor4C
			.patient-card
				background-color white
				display flex
				padding 25px 30px 25px 15px
				align-items center
				justify-content space-between
				margin-top 16px
				.card-icon
					padding 16px
					margin-right 10px
					img
						width 48px
						height 48px
						display block
				.card-content
					flex 1
					.title
						font-size 30px
						line-height 48px
						color blackFontColor1A
						margin-bottom 10px
					.num
						font-size 26px
						line-height 36px
						color #aaa
				.card-select
					width 40px
					height 40px
					img
						width 100%
						height 100%
						display block
						opacity 0
					&.active
						img
							opacity 1
</style>
